<template>
  <div class="vt-cart-item flx-lm">
    <div class="cart-item-check flx-mm" :class="cartItemChecker ? 'vt-check-icon': 'vt-uncheck-icon'" @click="onCheck">
      <i class="fa fa-check" aria-hidden="true" />
    </div>
    <div class="cart-item-content">
      <slot></slot>
    </div>
    <div class="cart-item-num-button">
      <span @click="onClickMinius" class="minius"> - </span>
      <span class="num"> {{num}} </span>
      <span @click="onClickAdd" class="add"> + </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'cart-item',
    props: {
      val: {
        type: [String, Number],
        require: true
      },
      count: {
        type: Number,
        default(){
          return undefined
        }
      },
      maxCount: {
        type: Number,
        default(){
          return undefined
        }
      },
      minCount:  {
        type: Number,
        default(){
          return undefined
        }
      },
    },
    data(){
      return {
		comName: '<CartItem>',
        num: this.count === undefined ? 0 : this.count,
        cartItemChecker : false
      }
    },
    inject: ['test'],
    watch: {
      test: {
        immediate: true,
        handler() {
          let isExistInVModel = this.test.some(i=>{
            return i === this.val
          })
          this.checkCartItem(isExistInVModel)
          this.$parent.$emit('cart-item-update')
        }
      }
    },
    methods: {
      checkCartItem(x){
        this.cartItemChecker = x
      },
      onCheck(){
        this.$parent.$emit('click-checkbox-group-item', this.val)
      },
      onClickMinius(){
        if (this.minCount === undefined){
          if(this.num > 1) {
            this.num --;
            this.$emit('num-change', this.num)
          }
        }else{
          if (this.num > this.minCount) {
            this.num --;
            this.$emit('num-change', this.num)
          }
        }
      },
      onClickAdd () {
        if (this.maxCount === undefined){
          this.num ++;
          this.$emit('num-change', this.num)
        }else{
          if (this.num < this.maxCount) {
            this.num ++;
            this.$emit('num-change', this.num)
          }
        }
      },
    }
  }
</script>

<style scoped lang="stylus">
  @import './index.styl'
</style>
